<template>
  <el-dialog :visible.sync="isShow" width="80%" :title="'查看报名 | 课程：' +  row.name">
    <el-row>
      <el-form :model="searchParams" ref="searchParams" :inline="true">
        <el-form-item label="学校名称">
          <el-input class="input" v-model="searchParams.school_name" maxlength='20' placeholder="请输入" clearable
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input class="input" v-model="searchParams.realname" maxlength='20' placeholder="请输入" clearable
            show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch" type="primary" icon="el-icon-search" style="margin-left:40px">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" style="margin:10px 0">
      </el-form>
      <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="studentModel.id" label="学生ID" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentModel.types" label="类型">
          <template slot-scope="{row, index}">
            {{ formData.dicts.types[row.studentModel.types] }}
          </template>
        </el-table-column>
        <el-table-column prop="studentModel.realname" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentModel.phone" label="电话" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentModel.school_name" label="学校" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentModel.dept_name" label="系部" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentModel.stu_id" label="学号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="studentModel.id_card" label="身份证号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="checkStatus" label="审核状态" show-overflow-tooltip>
          <template slot-scope="{row, index}">
            <el-tag v-if="row.checkStatus == 'PASS'">通过</el-tag>
            <el-tag v-if="row.checkStatus == 'REFUSE'" type="info">未通过</el-tag>
            <el-tag v-if="row.checkStatus == 'CHECKING'" type="success">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
        <el-table-column prop="redact" label="操作" fixed="right" width="120">
          <template slot-scope="{ row, index }">
            <el-button type="text" @click="operateAction('checkPass', row)" size='medium'>通过</el-button>
            <el-button type="text" @click="operateAction('checkRefuse', row)" size='medium'>拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize" :page.sync="page"
        :limit.sync="size" @pagination="getDataList" />
    </el-row>
    <el-dialog :visible.sync="innerVisible" width="800px" title='' append-to-body>
            <el-form ref="rowForm" :model="form" :rules="rules" label-position="top">
                <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
                    <el-col style="margin-left: 20px" :span="18">
                        <el-form-item label="拒绝原因" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" clearable type='textarea' :rows="8" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="margin-top: 30px;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;">
            <el-button type="primary" @click="operateAction('checkRefuseSave')">保存</el-button>
            <el-button @click="innerVisible = false" type="info" size="mini">关闭</el-button>
            </div>
        </el-dialog>
  </el-dialog>
</template>

<script>
import { formData } from './data'
import { MessageBox, Message } from 'element-ui'
export default {
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      dataList: [],
      searchParams: {},
      multipleSelection: [],
      formData,
      isShow: false,
      innerVisible: false,
      row: {},
      form: {},
      rules:{
                remark: [
                    { required: true, message: '请输入拒绝原因', trigger: 'blur' }
                ]
            },
            currentRow: {}

    }
  },
  created() {
    if (this.$route.query.currentSearchParams) {
      this.searchParams = JSON.parse((decodeURIComponent(this.$route.query.currentSearchParams)))
      this.page = this.searchParams.page
    }
  },
  methods: {
    show(val) {
      this.isShow = true
      this.row = val
      this.getDataList()
    },
    close() {
      this.isShow = false
    },
    handleSearch() {
      this.page = 1
      this.getDataList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    operateAction(scene, row) {
      switch (scene) {
        case 'checkPass':
          this.request_post('education/courseStudent/checkPassAction/', { obj_id: row.id }).then(res => {
            if (res.data.code == 10000) {
              this.getDataList()
              Message({
                message: '操作成功',
                duration: 5 * 1000
              })
            }
          });
          break;
        case 'checkRefuse':
          this.innerVisible = true
          this.currentRow = row
          break;
        case 'checkRefuseSave':
          this.$refs['rowForm'].validate((valid) => {
            if (valid) {
              this.request_post('education/courseStudent/checkRefuseAction/', { obj_id: this.currentRow.id, remark: this.form.remark }).then(res => {
                if (res.data.code == 10000) {
                  this.innerVisible = false
                  this.getDataList()
                  Message({
                    message: '操作成功',
                    duration: 5 * 1000
                  })
                }
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
          break;
        default:
          break;
      }
    },
    //数据请求-----------------------------------------------
    // 获取列表数据
    getDataList() {
      this.searchParams.page = this.page
      this.searchParams.size = this.size
      this.searchParams.course = this.row.id
      this.request_get('education/courseStudent/', this.searchParams).then(res => {
        if (res.data.code == 10000) {
          this.totalSize = res.data.data.total_count
          this.dataList = res.data.data.list
        }
      });
    }
  }
}

</script>

<style lang="scss" scoped></style>